<template>
  <div>
    <div class="mpw-calendar-tabout border-bottom"> <!-- 导航栏 -->
      <div>
        <span class="mpw-calendar-tabitem" v-for="item in list" :key="item.id">{{ item.name }}</span>
      </div>
      <span class="mp-tab-slider"></span>
    </div> <!-- 导航栏end -->
    <div class="mp-ticket-container" v-for="item in reservelist" :key="item.id"> <!-- 第一层渲染,在成人票上加margin-top -->
      <div> <!-- 成人票模块 -->
        <div class="mp-promote border-bottom">
          <h3 class="mp-ticket-type">{{ item.name }}</h3>
        </div>
      </div>  <!-- 成人票模块end -->
      <div v-for="iten in item.children" :key="iten.id"> <!-- 第二层渲染 -->
        <div class="mp-ticket-type-info border-bottom" @click="isshow(iten.id)">
          <h5 class="mp-ticket-type-name">{{ iten.name }}</h5>
          <div class="mp-ticket-type-price">
            ¥<em class="mp-price-num">{{ iten.lowerPrice }}</em>
            <span class="mp-ticket-numword">起</span>
          </div>
          <div class="mp-ticket-type-extend iconfont" v-if="!showids.includes(iten.id)">&#xe61a;</div>
          <div class="mp-ticket-type-extend iconfont" v-if="showids.includes(iten.id)">&#xe619;</div>
        </div>
        <reserve :list="iten.children" v-show="showids.includes(iten.id)"></reserve> <!-- 引用预定组件，在里面写第三层渲染 -->
      </div>
      <div class="mp-more-refresh border-top">
        <p>查看剩余产品<span class="iconfont">&#xe61a;</span></p>
      </div>
    </div>
  </div>
</template>

<script>
import Reserve from '@/components/reserve/Reserve.vue'
export default {
  name: 'DetailDhl',
  components: {/* 注册组件 */
    Reserve
  },
  props: {
    list: Array,
    reservelist: Array
  },
  data () {
    return {
      showids: []
    }
  },
  methods: {
    isshow (id) {
      if (!this.showids.includes(id)) {
        this.showids.push(id)
      } else {
        let newids = this.showids.filter((item) => {
          return item !== id
        })
        this.showids = newids
      }
    }
  }
}
</script>

<style lang="stylus" scoped="scoped">
  .mpw-calendar-tabout
   margin-top 0.2rem
   position relative
   background-color #fff
   color #212121
   height .96rem
   line-height .96rem
   white-space nowrap
   overflow-x auto
   .mpw-calendar-tabitem
    display inline-block
    height .92rem
    width 2rem
    line-height .96rem
    text-align center
    font-size .32rem
   .mp-tab-slider
    position absolute
    bottom 0
    display inline-block
    height .04rem
    width 1.4rem
    background-color #00bcd4
  .mp-ticket-container
   margin-top 0.2rem
  .mp-promote
    position relative
    background #fff
    padding-left .2rem
.mp-ticket-type
  padding 0 .2rem
  height .88rem
  background #fff
  color #333
  font-size .32rem
  line-height .88rem
.mp-ticket-type-info
  position relative
  padding .24rem .2rem
  background #fff
  .mp-ticket-type-name
   margin-right 1.8rem
   color #333
   font-size .3rem
   line-height .48rem
  .mp-ticket-type-price
    overflow hidden
    position absolute
    top: 50%
    height .4rem
    line-height .4rem
    right 0.58rem
    margin-top -0.2rem
    color #ff9800
    font-size .24rem
.mp-ticket-type-extend
  position absolute
  top 0.32rem
  right 0.2rem
  bottom 0rem
  height .4rem
  width 0.4rem
  line-height .4rem
  font-size 0.4rem
  color #bbb
.mp-price-num
  margin-left .04rem
  font-size .4rem
.mp-ticket-numword
  display inline-block
  color #9e9e9e
  font-size .24rem
.mp-more-refresh
  position relative
  margin-top -.02rem
  height .8rem
  background #fff
  color #616161
  line-height .8rem
  text-align center
  z-index 2
  p
   span
    margin-left .1rem
    color #616161
    font-size 0.36rem
</style>
